<!-- 客户定位-->
<template>
  <div class="map-exchange-bg2">
    <el-card class="map-bg">
      <div id="dividerMap"></div>
    </el-card>
    <div class="operate-bg">
      <el-card>
        <div slot="header" class="page-title-bg">
          <div class="page-title">
            <div class="title-icon">查询条件</div>
          </div>
        </div>
        <div class="formBody">
          <el-form :inline="true" size="small" class="form" label-width="100px">
            <el-form-item label="保单号:">
              <el-input v-model="formInline.PolicyNumber" placeholder="请输入保单号" clearable class="ibput"></el-input>
            </el-form-item>
            <el-form-item label="投保人姓名:">
              <el-input v-model="formInline.Name" placeholder="请输入投保人姓名"  clearable class="ibput"></el-input>
            </el-form-item>
            <el-form-item label="投保人手机:">
              <el-input v-model="formInline.phoneNumber" placeholder="请输入投保人手机号" clearable class="ibput"></el-input>
            </el-form-item>
            <el-form-item label="投保人证件号:">
              <el-input v-model="formInline.idNumber" placeholder="请输入投保人证件号" clearable class="ibput"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
      <Card style="margin-top: 20px;">
        <el-table :data="tableList" max-height="320" style="width: 100%" :cell-style="styleBack">
          <el-table-column width="110" label="投保人" prop="appntName" align="center" />
          <el-table-column width="110" label="保单号" prop="contNo" align="center" />
          <el-table-column width="110" label="渠道" prop="saleChnl" align="center" />
          <el-table-column width="110" label="交次" prop="paySize" align="center" />
          <el-table-column width="110" label="保费" prop="prem" align="center" />
          <el-table-column width="110" label="困难件分数" prop="hard" align="center" />
          <el-table-column width="110" label="服务类型" prop="renewalType" align="center" />
          <el-table-column width="110" label="服务人员代码" prop="renewalCode" align="center" />
          <el-table-column width="110" label="服务人员姓名" prop="renewalName" align="center" />
          <el-table-column width="110" label="代理人代码" prop="agentCode" align="center" />
          <el-table-column width="110" label="代理人姓名" prop="agentName" align="center" />
          <el-table-column width="110" label="险类" prop="risk" align="center" />
        </el-table>
        <div style="float: right; margin: 20px 0;">
          <el-button type="primary" @click="seach" size="mini">查询</el-button>
          <el-button type="primary" @click="reset" size="mini">导出</el-button>
        </div>
    </Card>
    </div>
  </div>
</template>
<script>
import LabelsData from "../china-pp";
import {getcustomRegionPolicyQuery } from '../../../api/renewalPlatformApi/index';
export default {
  name: '',
  data() {
    return {
      formInline:{
        PolicyNumber:"",
        Name:"",
        phoneNumber:"",
        idNumber:"",
      },
      tableList:[],
      map: null,
    }
  },
  mounted() {
    this.mapLoad();
  },
  methods: {
    // 地图初始化
    mapLoad() {
      let disCountry = new AMap.DistrictLayer.Country({
        zIndex: 10,
        SOC: 'CHN',
        depth:1,
        styles: {
          'nation-stroke':'#ff0000',
          'coastline-stroke':'#0088ff',
          'province-stroke':'grey',
        }
      })
      this.map = new AMap.Map("dividerMap",{
        viewMode: '2D',
        zoom:11,
        center: [120.312983,31.492283],
        isHotspot: false,
        defaultCursor:'pointer',
      })
      this.map.addControl(new AMap.Scale());
      this.map.addControl(new AMap.ToolBar({ liteStyle: true }));
      const _this = this;
      this.map.on('complete',function(){
        let layer = new AMap.LabelsLayer({
          // 开启标注避让，默认为开启，v1.4.15 新增属性
          collision: false,
          // 开启标注淡入动画，默认为开启，v1.4.15 新增属性
          animation: true,
        });
        for (let i = 0; i < LabelsData.length; i++) {
          let labelsMarker = new AMap.LabelMarker(LabelsData[i]);
          layer.add(labelsMarker);
        }
        _this.map.add(layer);
      }),
      this.map.on('click',function(e){
        _this.map.remove(_this.map.getAllOverlays());
          console.log(e.lnglat.lng,"eeee")
          var marker = new AMap.Marker({
          position: new AMap.LngLat(e.lnglat.lng, e.lnglat.lat), //参数为经纬度
          draggable: true,
          cursor: 'move',
          riseOnHover: true,
          bubble: true,
          cursor: 'pointer',
          icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png'
        })
        _this.map.add(marker);
      })
    },
    seach(){
      this.getDatalist()
    },
    // 地图分布人员
    getDistribution(){
      getcustomRegionPolicyQuery({manageCom:"860101"}).then( res =>{
        if(res.code == 200){
          this.tableList =  res.data.value
          let mapDot = new AMap.Map("dividerMap", {resizeEnable: true})
          let lnglats = []
          let listData = []
          for(let a=0;a< this.tableList.length; a++){
            this.tableList[a].point[Symbol.isConcatSpreadable] = false
            this.tableList[a][Symbol.isConcatSpreadable] = false
            lnglats = lnglats.concat(this.tableList[a].point)
            listData = listData.concat(this.tableList[a])
          }
          console.log(listData,"demomdeomdeodemoedmoe")
          let marker1 = new AMap.Marker({
              position: lnglats[0],
              offset: new AMap.Pixel(-6, -8),
              icon: '//vdata.amap.com/icons/b18/1/2.png',
          });
          mapDot.add(marker1)
          let infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(5, 8),anchor: 'top-left'});
          for (let i = 0; i < lnglats.length; i++) {
            let markerContent = '<div class="dot"></div>';
            let marker = new AMap.Marker({
                position: lnglats[i],
                map: mapDot,
                content: markerContent,
            });
            
            let info = [];
            info.push(`<p class='input-item'>保单号: ${listData[i].contNo || 0} </p>`);
            info.push(`<p class='input-item'>投保人姓名: ${listData[i].appntName || '-'}</p>`);
            info.push(`<p class='input-item'>保费: ${listData[i].prem || '-'}元</p>`);
            info.push(`<p class='input-item'>交次: ${listData[i].paySize || '-'}</p>`);
            info.push(`<p class='input-item'>应交日: ${listData[i].willPayDate || '-'}</p>`);
            info.push(`<p class='input-item'>困难件分数: ${listData[i].hard || '-'}</p>`);
            info.push(`<p class='input-item'>是否考核件: ${listData[i].flag || '-'}</p>`);
            marker.content = info.join(""),
            marker.on('click', (e)=>{
            infoWindow.setContent(e.target.content);
            infoWindow.open(mapDot, e.target.getPosition());
            });
            marker.emit('click', {target: marker});
          }
          mapDot.setFitView();
        }else{
          this.tableList = []
        }
      }) 
    },
    getDatalist(){
      // if(!this.formInline.PolicyNumber) return this.$message.error('请输入保单号');
      let obj = {
        manageCom:860101,
        contNo:this.formInline.PolicyNumber,
        agentName:this.formInline.Name,
        mobile:this.formInline.phoneNumber,
        cardId:this.formInline.idNumber,
      }
      getcustomRegionPolicyQuery(obj).then( res =>{
        if(res.code == 200){
          this.tableList = res.data.value
          this.getDistribution()
        }else{
          this.tableList = []
          this.$message.error('查询结果为空');
        }
      })
    },
    reset(){
      
    },
    styleBack({ row, column, rowIndex, columnIndex }) {
      if (columnIndex == 0 && rowIndex == 0) {
        return { color: "red" };
      }
    },
  }
}
</script>

<style lang="scss" >
.dot {
  width: 10px;
  height: 10px;
  background-color: red;
  border-radius: 50%;
}
.map-exchange-bg2{
  display: flex;
  .page-title-bg{
    display: flex;
    align-items: center;
    justify-content: space-between;
    .page-title{
      display: flex;
      align-items: center;
      font-size: 18px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #2A2A2A;
      .title-icon{
        color: #fff;
      }
    }
    .page-title-operate{
      padding-left: 10px;
    }
  }
  .formBody{
    .ibput{
      width:150px
    }
  }
  
  .map-bg{
    width: 60%;
    position: relative;
    .el-card__body{
      padding: 0;
    }
    #dividerMap{
      width: 100%;
      height: calc(100vh - 160px);
      position: relative;
    }
  }

  .operate-bg{
    width: 39%;
    margin-left: 10px;
    .divide-bg{
      .divide-upload{
        padding: 0 0 10px 10px;
        span:nth-child(1){
          color: #818181;
        }select
        span:nth-child(2){
          color: #CFCFCF;
        }
      }
      .upload-btn{
        display: inline-block;
      }
    }
  }
  .operate-bg .el-card__header {
    border: 0;
    background-color: #082AFF;
    border-radius: 10px 10px 0 0;
  }
  ::v-deep.el-card__body{
    padding: 15px;
  }
}
</style>
